<template>
  <section class="box">
    <div class="head"></div>
    <div class="content">
      <div class="left" ref="left">
        <ul>
          <li
            class="right-item-hook"
            v-for="(item, index) in goods"
            :key="item.name"
            :class="{ current: currentIndex == index }"
            @click="selectItem(index, $event)"
          >
            <img :src="item.icon" v-if="item.icon" alt="" />
            <span class="left-item">{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <div class="right" ref="right">
        <ul>
          <li
            class="right-item right-item-hook"
            v-for="(item, index) in goods"
            :key="index"
          >
            <h2>{{ item.name }}</h2>
            <ul>
              <li v-for="num in item.foods" :key="num.name">
                <div class="box">
                  <img :src="num.image" alt="" />
                  <div class="Sbox">
                    <div class="one">{{ num.name }}</div>
                    <span class="two">{{ num.description }}</span>
                    <div class="three">
                      <span>月售{{ num.sellCount }}份</span>
                      <span>好评率{{ num.rating }}%</span>
                    </div>
                    <span class="four">
                      <span>￥</span>
                      <span>{{ num.price }}</span>
                      <span>￥{{ num.oldPrice }}</span>
                    </span>
                  </div>
                </div>
                <div class="btn-box">
                  <i
                    class="iconfont icon-jianhao"
                    @touchstart="foodsubstart(num.name,item.id,0)"
                    v-show="num.count>0"
                  ></i>
                  <span v-show="num.count>0">{{ num.count }}</span>
                  <i
                    class="iconfont icon-jiahao-tianchong"
                    @click="foodsubstart(num.name,item.id,1)"
                  ></i>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <ShoppingCart v-if='foodList.length'></ShoppingCart>
    <Footer v-else />
  </section>
</template>

<script src="./iconfont.js"></script>
<script>
import BScroll from "better-scroll";
import { mapGetters } from "vuex";

import Footer from "@/components/Footer";
import ShoppingCart from "@/view/shoppingCart";
import { mapState } from "vuex";
export default {
  components: {
    Footer,
    ShoppingCart,
  },
  data() {
    return {
      listHeight: [],
      scrollY: 0, //实时获取当前y轴的高度
      clickEvent: false,
    };
  },

  methods: {
    foodsubstart(foodsnum,index,a){
      this.$store.commit('foodsnum', {foodsnum,index,a})
    },
    getGoodsList() {
      this.$store.dispatch("getGoodsList");
    },
    _initScroll() {
      //better-scroll的实现原理是监听了touchStart,touchend事件，所以阻止了默认的事件（preventDefault）
      //所以在这里做点击的话，需要在初始化的时候传递属性click,派发一个点击事件
      //在pc网页浏览模式下，点击事件是不会阻止的，所以可能会出现2次事件，所以为了避免2次，可以在绑定事件的时候把$event传递过去
      this.lefts = new BScroll(this.$refs.left, {
        click: true,
      });
      this.rights = new BScroll(this.$refs.right, {
        probeType: 3, //探针的效果，实时获取滚动高度
        click: false,
        preventDefault:false,
        tap:true
         });
      //rights这个对象监听事件，实时获取位置pos.y
      this.rights.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
        let rightItems = this.$refs.left.getElementsByClassName(
          "right-item-hook"
        );
        let el = rightItems[this.currentIndex];
        this.lefts.scrollToElement(el, 300);
      });
    },
    _getHeight() {
      let rightItems = this.$refs.right.getElementsByClassName(
        "right-item-hook"
      );
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < rightItems.length - 1; i++) {
        let item = rightItems[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
    selectItem(index, event) {
      this.clickEvent = true;
      //在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
      //浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
      if (!event._constructed) {
        return;
      } else {
        let rightItems = this.$refs.right.getElementsByClassName(
          "right-item-hook"
        );
        let el = rightItems[index];
        this.rights.scrollToElement(el, 300);
      }
    },
  },
  mounted() {
    this.getGoodsList();
  },
  watch: {
    goods: {
      handler() {
        this.$nextTick(() => {
          this._initScroll();
          this._getHeight();
        });
      },
      deep: true,
    },
  },
  updated() {},
  computed: {
    ...mapState({
      goods: (state) => state.goods.goodsList
    }),
    // ...mapGetters({
    // foodList: (state) => state.goods.foodList
    // }),
    ...mapGetters(["foodList"]),
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        //当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
        //>=height，是因为一开始this.scrollY=0,height=0
        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          return i;
        }
        if (
          this.listHeight[this.listHeight.length - 1] -
            this.$refs.right.clientHeight <=
          this.scrollY
        ) {
          if (this.clickTrue) {
            return this.currentNum;
          } else {
            return this.listHeight.length - 1;
          }
        }
      }
      //如果this.listHeight没有的话，就返回0
      return 0;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  position: absolute;
  top: 355px;
  bottom: 100px;
  width: 100%;
  overflow: hidden;
  // background: #eee;
  .left {
    flex: 0 0 80px;
    width: 160px;
    // height: 108px;
    background-color: #f3f5f7;
    // overflow: hidden;
    ul {
      li {
        // position: relative;
        background-color: #f3f5f7;
        width: 160px;
        height: 108px;
        line-height: 108px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        img {
          width: 24px;
          height: 24px;
          line-height: 28px;
          vertical-align: middle;
        }
        span {
          line-height: 28px;
          font-weight: 200;
          text-align: center;
        }
      }
    }

    .current {
      width: 160px;
      height: 108px;

      background-color: white;
      img {
        width: 24px;
        height: 24px;
        line-height: 28px;
        vertical-align: middle;
      }
      .left-item {
        display: inline-block;
        width: 112px;
        font-size: 24px;
        line-height: 28px;
        font-weight: 600;
        vertical-align: middle;
      }
    }
  }
  .right {
    width: 100%;
    flex: 1;
    .right-item {
      h2 {
        padding-left: 28px;
        background-color: #f3f5f7;
        height: 52px;
        font: size 24px;
        color: rgb(147, 153, 159);
        font-weight: 700;
        line-height: 48px;
      }
      li {
        position: relative;
        width: 100%;
        padding: 36px;
        border-bottom: 1px solid #ccc;
        .box {
          display: flex;

          img {
            width: 110px;
            height: 110px;
            margin-right: 20px;
          }
          .Sbox {
            margin-top: 4px;
            .one {
              font-size: 28px;
              color: rgb(7, 17, 27);
              line-height: 28px;
              margin-bottom: 16px;
            }
            .two {
              font-size: 20px;
              color: rgb(147, 153, 159);
              line-height: 20px;
              margin-bottom: 16px;
            }
            .three {
              font-size: 20px;
              color: rgb(147, 153, 159);
              line-height: 20px;
              margin-top: 16px;
              span {
                display: inline-block;
                &:nth-child(1) {
                  margin-right: 24px;
                }
              }
            }
            .four {
              span {
                color: rgb(240, 20, 20);
                display: inline-block;
                &:nth-child(2) {
                  margin-right: 16px;
                  font-size: 28px;
                  font-weight: 700;
                  line-height: 48px;
                }
                &:nth-child(3) {
                  margin-right: 16px;
                  font-size: 20px;
                  font-weight: 700;
                  color: rgb(147, 153, 159);
                  text-decoration: line-through;
                }
              }
            }
          }
        }
        .btn-box {
          position: absolute;
          bottom: 30px;
          right: 116px;
          span {
            display: inline-block;
            width: 48px;
            text-align: center;
            font-size: 20px;
            vertical-align: middle;
          }
          i {
            width: 48px;
            height: 48px;
            display: inline-block;
            font-size: 48px;
            color: blue;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>